import { Form, Input, Button,message } from 'antd';
import { useState, useEffect } from 'react'
import { USER_KEY } from '../utils/constant'
import { useDispatch, useSelector } from 'react-redux'
import { getCaptcha } from '../service/request'
import { throttle } from '../utils'
import { signIn } from '../service/request'
import { UserOutlined, LockOutlined, BorderTopOutlined } from '@ant-design/icons';
import { setUser } from '../store/userReducer'
import { Navigate } from "react-router-dom"

function redirectToHome(user){
    console.log('redirec',user)
    if (user) return <Navigate to="/" />
}
const Login = () => {
    const [loading,setLoading] = useState(false)
    const dispatch = useDispatch()
    const onFinish = async (values) => {
        console.log('Success:', values);
        setLoading(true)
        const res = await signIn(values)
        if (res.status === 200) {
            let user = res.data.user_info
            user.token = res.data.token
            dispatch(setUser(user))
        }else {
            message.error(res.msg)
            loadCaptcha()
        }
        setLoading(false)
        // 
    }
    const user = useSelector(state => state[USER_KEY])
    // if(user.user)
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    }
    const [imgSrc, setImgSrc] = useState('')
    const loadCaptcha = throttle(async () => {
        const data = await getCaptcha()
        setImgSrc(URL.createObjectURL(data))
    }, 500)
    useEffect(() => {
        loadCaptcha()
    }, [])
    return (
        <div className="login">
            {redirectToHome(user.user)}
            <Form
                name="basic"
                initialValues={{ remember: true }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
                className="login-form"
                size="large"
            >
                <div className="login-logo">
                    <img src="https://shop.fed.lagou.com/uploads/attach/2021/06/20210610/267b2230668ba8c888aef3bad5d77607.png" alt="logo" />
                </div>
                <Form.Item
                    name="account"
                    rules={[{ required: true, message: '用户名' }]}
                >
                    <Input prefix={<UserOutlined className="site-form-item-icon" />} />
                </Form.Item>

                <Form.Item
                    name="pwd"
                    rules={[{ required: true, message: '密码' }]}
                >
                    <Input.Password prefix={<LockOutlined className="site-form-item-icon" />} />
                </Form.Item>
                <Form.Item
                    rules={[{ required: true, message: '验证码' }]}
                    name="imgcode"
                >
                    <Form.Item name="imgcode" style={{ display: 'inline-block', width: 'calc(100% - 130px)' }}>
                        <Input name="imgcode"
                            prefix={<BorderTopOutlined className="site-form-item-icon" />} />
                    </Form.Item>


                    <img className="login-code-img" src={imgSrc} onClick={loadCaptcha} alt="验证码" />
                </Form.Item>
                <Form.Item>
                    <Button type="primary" htmlType="submit" className="login-form-button" loading={loading}>
                        登录
                    </Button>
                </Form.Item>
            </Form>
        </div>

    )
}

export default Login
